<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="showSearch">
        <!-- 搜索 -->
        <el-input v-model="query.procDefName" prefix-icon="el-icon-search" clearable placeholder="流程名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation />
      </div>

      <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 260px)" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <!--        <el-table-column type="selection" align="center" min-width="6%" />-->
        <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" min-width="10%" />
        <el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true" min-width="10%" />
        <el-table-column label="任务节点" align="center" prop="taskName" min-width="10%" />
        <el-table-column label="流程发起人" align="center" min-width="10%">
          <template slot-scope="scope">
            <label>{{ scope.row.startUserName }}
              <el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
            </label>
          </template>
        </el-table-column>
        <el-table-column label="接收时间" align="center" prop="createTime" min-width="10%" />
        <el-table-column label="审批时间" align="center" prop="finishTime" min-width="10%" />
        <el-table-column label="耗时" align="center" prop="duration" min-width="10%" />
        <el-table-column label="操作" align="center" min-width="12%">
          <template slot-scope="scope">
            <el-row :gutter="10" class="mb8">
              <el-col>
                <el-button icon="el-icon-tickets" type="primary" plain size="mini" @click="handleFlowRecord(scope.row)">流转记录</el-button>
              </el-col>
              <!--              <el-col :span="12">-->
              <!--                <el-button icon="el-icon-tickets" type="primary" plain size="mini" @click="handleRevoke(scope.row)">撤回</el-button>-->
              <!--              </el-col>-->
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>

import { revokeProcess } from '@/api/flowable/finished'
import CRUD, { presenter, header, crud } from '@brotherCrud/crud'
import Parser from '@/components/parser/Parser'
import pagination from '@brotherCrud/Pagination'
import rrOperation from '@brotherCrud/RR.operation'
export default {
  name: 'Deploy',
  components: { Parser, pagination, rrOperation },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({
      title: '流程定义',
      url: 'api/flowable/task/finishedList'
    })
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 表单校验
      rules: {}
    }
  },
  created() {
  },
  methods: {
    /** 流程流转记录 */
    handleFlowRecord(row) {
      this.$router.push({
        // name: 'Record',
        path: '/flowable/task/record/index',
        query: {
          procInsId: row.procInsId,
          deployId: row.deployId,
          taskId: row.taskId
        }
      })
    },
    /** 撤回任务 */
    handleRevoke(row) {
      const params = {
        instanceId: row.procInsId
      }
      revokeProcess(params).then(res => {
        this.$message.success(res.msg)
        this.getList()
      })
    }
  }
}
</script>

